<template>
	<view>
		<view class="cell">
			<view class="cell-title">抄表日期</view>
			<view class="horizontal cell-content">
				<view>{{detail.readTime | smartTime('YY/mm/dd')}}</view>
				<uni-tag slot='right' :text="['未缴', '已缴'][detail.status]" type="primary" size="small" circle></uni-tag>
			</view>
		</view>
		<view class="cell">
			<view class="cell-title">户名</view>
			<view class="cell-content">{{detail.userName || detail.companyName}}</view>
		</view>
		<view class="cell">
			<view class="cell-title">房号</view>
			<view class="cell-content">{{addr}}</view>
		</view>
		
		<view class="cell">
			<view class="cell-title">本次读数</view>
			<view class="cell-content">{{detail.currentNum}}</view>
		</view>
		
		<view class="cell">
			<view class="cell-title">上次读数</view>
			<view class="cell-content">{{detail.lastNum}}</view>
		</view>
		
		<view class="cell">
			<view class="cell-title">实用水量</view>
			<view class="cell-content">{{detail.waterNum}}L</view>
		</view>
		
		<view class="cell">
			<view class="cell-title">应缴金额</view>
			<view class="cell-content">￥{{detail.price}}</view>
		</view>
		
		<block v-if="detail.status==1">
			<view class="cell">
				<view class="cell-title">实缴金额</view>
				<view class="cell-content">￥{{detail.money || ''}}</view>
			</view>
			
			<view class="cell">
				<view class="cell-title">支付时间</view>
				<view class="cell-content">{{detail.payTime || ''}}</view>
			</view>
		</block>

		<!-- <image @tap="preview" show-menu-by-longpress webp class="img" :src="img" mode="widthFix"></image> -->
		<view class="bottom horizontal" v-if="detail.status==0">
			<button class="capsule scale" style="background-color: #2E62E2;color: white;" @tap="pay">立即支付</button>
		</view>
	</view>
</template>

<script>
	import hgCell from '@/components/hg-cell/hg-cell.vue'
	const app = getApp()
	
	export default {
		data() {
			return {
				detail:{
					"id":'', //账单ID
					"billsDate":"", //账单日期
					"currentNum":'', //本次读数
					"lastNum":'', // 上次读数
					"waterNum":'', // 用水量
					"price":'', // 金额
					"status":'', // 缴费状态：0 未缴费 1已缴费
					"userName":"", //户主姓名
					"payClassify":'', // 支付操作方式 1：市民小程序  2：人工
					"payTime":"",
					"money":'', 			//实际支付金额
					//地址信息
					"roomAddress":{ 
						"courtName": "", // 小区名称
						"buildingName": '', // 楼宇号
						"roomUnit": '',  // 单元
						"roomNo": '' // 房间号
					}
				}
			}
		},
		onLoad(opt) {
			uni.showLoading({
				title:'加载中...'
			})
			if(opt.id){
				uni.request({
					header:{
						Authorization: 'Bearer ' + app.globalData.token,
					},
					url: app.globalData.curl + 'order/detail/' + opt.id,
					method: 'GET',
					data: {},
					success: res => {
						const {data} = res
						uni.hideLoading()
						if(data.code==200){
							this.detail = data.data
						}else if(data.code==500){
							uni.showToast({
								icon:'none',
								title: data.message
							});
						}
					},
					fail: (err) => {console.error(err)},
				});
			}
		},
		methods: {
			pay(){
				uni.showModal({
					cancelText:'取消',
					confirmText:'缴费',
					content:`您正在为"${this.addr}"进行缴费，总金额：${this.detail.price.toFixed(2)}元`,
					title:'缴费提醒',
					success: (res) => {
						if(res.confirm){
							uni.request({
								header:{
									Authorization: 'Bearer ' + app.globalData.token,
								},
								url: app.globalData.curl + 'order/pay',
								method: 'POST',
								data: {
									orderId: this.detail.id,
								},
								success: res => {
									const {data} = res
									console.log(data)
									if(res.code==200){
										uni.requestPayment({
											orderInfo: '',
											success: res => {},
											fail: () => {},
											complete: () => {}
										});
									}else if(data.code==500){
										uni.showToast({
											icon:'none',
											title: data.message,
										});
									}
								},
								fail: (err) => {console.error(err)},
							});
						}
					}
				});
			},
		},
		computed:{
			addr(){
				const addr = this.detail.roomAddress
				return `${addr.courtName}${addr.buildingName}${addr.roomUnit}单元${addr.roomNo}`
			}
		}
	}
</script>

<style scoped>
	
</style>
